<template>
	<view class="container">
		<!--头部 -->
		<view class="top">
			<view class="back" @click="back()">
				<image src="../../static/assets/back2.png" mode=""></image>
			</view>
			找室友详情
		</view>
		<!-- 名片 -->
		<view class="person">
			<view class="touxiang">
				<image :src="roommateObj.touxiang" mode=""></image>
			</view>
			<view class="content">
				<text class="username">{{roommateObj.uname}}</text>
				<text class="create">{{roommateObj.create_time}}</text>
			</view>
		</view>
		<!-- 详情 -->
		<view class="detail_list">
			<view class="item">
				<view class="icon">
					<image src="../../static/assets/shop.png" mode=""></image>
				</view>
				<text>地址:{{roommateObj.address}}</text>
			</view>
			<view class="item">
				<view class="icon">
					<image src="../../static/assets/shop.png" mode=""></image>
				</view>
				<text>交通:{{roommateObj.near_subway_desc}}</text>
			</view>
			<view class="item">
				<view class="icon">
					<image src="../../static/assets/shop.png" mode=""></image>
				</view>
				<text>租金:{{roommateObj.tags}}</text>
			</view>
			<view class="item">
				<view class="icon">
					<image src="../../static/assets/shop.png" mode=""></image>
				</view>
				<text>入住时间{{roommateObj.checkin_date}}</text>
			</view>
			<view class="item">
				<view class="icon">
					<image src="../../static/assets/shop.png" mode=""></image>
				</view>
				<text>户型:{{roommateObj.huxing}}</text>
			</view>
	</view>
	<!-- 更多描述 -->
	<view class="moredetail">
		<text class="title">更多描述</text>
		<view class="more">
			<view class="des">{{roommateObj.describe}}</view>
			<view class="des">
				{{roommateObj.tags}}
			</view>
			<view class="banner">
				<view class="imglist">
					<block v-for="item in roommateObj.photos">
						<view class="imgitem">
						<image :src="item.imgurl" mode=""></image>
					</view>
					</block>
				</view>
			</view>
		</view>
	</view>
	<button type="default" @click="showMask">联系室友</button>
	<!-- 点击弹窗 -->
	<view class="mask" v-if="isShowmask">
		<view class="bg"></view>
		<view class="communicate">
			<view class="icon">
				<image src="../../static/assets/call.png" mode=""></image>
			</view>
			<view class="phone">
				联系方式：{{roommateObj.mobile}}
			</view>
			<view class="cancle" @click="showMask">x</view>
		</view>
	</view>
</view>
</template>

<script>
	import {roommateDetail} from "../../data/roommate_detail.js"
	export default {
		data() {
			return {
				isShowmask:false,
				roommateObj:{}
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			showMask(){
				this.isShowmask=!this.isShowmask;
			},
		},
		onLoad(option){
			// console.log(option.topicid)
			let getid=option.topicid;
			let temp=-1;
			roommateDetail.forEach ((item,index)=>{
				// console.log(item.result.topic_id)
				if(getid==item.result.topic_id){
					// console.log(index);
					temp=index
				}
			});
			let obj=roommateDetail[temp].result;
			// console.log(obj)
			let roommate={
				touxiang:obj.head_portrait,
				uname:obj.name,
				createtime:obj.create_time,
				des:obj.describe,
				address:obj.address,
				near_subway_desc:obj.near_subway_desc,
				tags:obj.tags,
				photos:obj.photos,
				checkin_date:obj.checkin_date,
				mobile:obj.mobile,
				huxing:obj.bedroom+'室'+obj.livingroom+'厅'+obj.bathroom+'卫',
			};
			this.roommateObj=roommate;
			// console.log(this.roommateObj)
		}
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	height: 100%;
	background-color: #F1F1F1;
	// toubu 
	.top{
		width: 100%;
		height: 150rpx;
		background-color: #585eaa;
		text-align: center;
		line-height: 150rpx;
		position: relative;
		font-size: 18px;
		font-weight: bold;
		color:#FFFFFF;
		.back{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 15%;
			left: 5%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	// 名片
	.person{
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		padding: 40rpx 0;
		background-color: #FFFFFF;
		.touxiang{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-left: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content{
			height: 120rpx;
			flex: 1;
			margin-right: 20rpx;
			text{
				display: block;
				width: 100%;
				padding: 8rpx;
			}
		}
	}
	// 详情
	.detail_list{
		width: 100%;
		margin-top: 40rpx;
		display: flex;
		flex-direction:column;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		.item{
			width: 95%;
			margin: 0 auto;
			padding: 5rpx 0;
			display: flex;
			align-items: center;
			.icon{
				width: 16px;
				height: 16px;
				margin-left: 30rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			text{
				display: block;
				margin-left: 30rpx;
				width: 100%;
				padding: 5rpx 0;
				color: #999999;
			}
		}
		
	}
	// 更多描述
	.moredetail{
		width: 100%;
		margin-top: 30rpx;
		color: #808080;
		background-color: #FFFFFF;
		.title{
			display: block;
			width: 90%;
			padding: 20rpx 5px;
			font-size:18px ;
			border-bottom: 1px solid #eeeeee;
		}
		.more{
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-top: 20rpx;
			.des{
				width: 90%;
				padding: 20rpx;
			}
			.banner{
				width: 100%;
				height: 250rpx;
				overflow: hidden;
				overflow-x: scroll;
				.imglist{
					width: 500%;
					height: 100%;
					display: flex;
					.imgitem{
						width:400rpx;
						height: 100%;
						margin: 0 30rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			// 隐藏水平滚动条
			::-webkit-scrollbar {
				width: 0;
			}
		}
	}
	// button{
	// 	height: 80px;
	// 	line-height: 80px;
	// }
	// 点击弹窗出现消失
	.mask{
		width: 100%;
		height: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 3;
		.bg{
			width: 100%;
			height: 100%;
			background-color: #808080;
			opacity: 0.5;
		}
		.communicate{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 400rpx;
			background-color: #FFFFFF;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			display:flex;
			align-items: center;
			color: #555555;
			.cancle{
				position: absolute;
				top: 5%;
				right: 5%;
				padding: 10rpx;
				font-size: 20px;
				text-align: center;
				line-height: 20px;
			}
			.icon{
				width: 150rpx;
				height: 150rpx;
				margin-left: 50rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #585eaa;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.phone{
				width: 60%;
				margin-left: 50rpx;
				font-size: 18px;
			}
			
		}
	}
}
</style>
